<template>
  <view v-if="isLoad">
    <view class="store-list" v-if="storeList.length">
      <view
        class="item-box"
        v-for="(store, i) in storeList"
        :key="i"
        @click="toStore(store.id)"
      >
        <view class="left">
          <image
            :src="adminImgPath + store.logo_image"
            mode="aspectFill"
          ></image>
        </view>
        <view
          class="right"
          :style="store.goodsList.length ? '    height: 450rpx;' : ''"
        >
          <view class="title-row">
            <view class="tit">{{ store.name }}</view>
            <view class="reserve-tag">可预约</view>
          </view>
          <view class="info-row">
            <view class="score">
              <!-- <text class="score-text">4.8</text> -->
              <!-- <text class="score-divider">|</text> -->
              <text class="sale-count">月售{{ store.sale_count }}</text>
            </view>
            <view class="distance">快至20分钟送达</view>
          </view>
          <view class="row"
            >营业时间：{{ store.business_hours_start_times }}~{{
              store.business_hours_end_times
            }}</view
          >
          <view class="tag-box">
            <view
              class="tag-column"
              v-for="(tag, index) in store.json"
              :key="index"
              >{{ tag.intro }}</view
            >
          </view>

          <view class="goods-scroll" v-if="store.goodsList.length">
            <scroll-view scroll-x="true" class="goods-list">
              <view
                class="goods-item"
                v-for="(item, index) in store.goodsList"
                :key="index"
              >
                <image
                  class="goods-image"
                  :src="adminImgPath + item.image"
                  mode="aspectFill"
                ></image>
                <view class="goods-name">商品名称{{ item.name }}</view>
                <view class="goods-price" v-if="item.form"
                  >¥{{ item.form_child[0].price }}</view
                >
              </view>
            </scroll-view>
          </view>

          <!-- <view class="discount-tag">热门商家</view> -->
        </view>
      </view>
      <view class="loading" v-if="showLoading">
        <view class="downwarp-progress mescroll-rotate"></view>
        <view class="downwarp-tip">加载中</view>
      </view>
      <view class="foot" v-if="showFoot">
        <text>更多商家加入中，敬请期待</text>
      </view>
    </view>
    <view class="empty" v-else style="padding-top: 80px">
      <view class="empty-container">
        <image
          class="empty-pic"
          src="/static/empty.png"
          mode="aspectFit"
        ></image>
        <view class="empty-title">暂无相关商家~</view>
      </view>
    </view>
  </view>
</template>

<script>
import ikz from "@/pages/Common/tools.js";
var app = getApp();
export default {
  name: "storeList",
  props: {
    showData: {
      type: String,
    },
    cssData: {
      type: Object,
    },
  },
  data() {
    return {
      isLoad: false,
      adminImgPath: app.globalData.adminImgPath,
      storeList: [],
      showFoot: false,
      showLoading: false,
      hasMore: false,
      page: 1,
    };
  },
  watch: {
    showData: {
      handler(newName, oldName) {},
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 获取商家列表
    getStoreList(id, keywords) {
      var path = "/xyb/supermarket/index/businsess_list";
      var data = {
        page: this.page,
        limit: 10,
        keywords: keywords ? keywords : "",
      };
      if (id) {
        data.business_category_id = id;
      }
      if (keywords) {
        data.keywords = keywords;
      }
      ikz.requestPost(path, data, (res) => {
        this.showLoading = false;
        this.$emit("loadEnd");
        if (res.data.code) {
          let list = res.data.data.data;
          if (this.page < res.data.data.total / 10) {
            this.hasMore = true;
          } else {
            this.showFoot = true;
            this.hasMore = false;
          }

          // 获取每个商家的商品列表
          list.forEach((store) => {
            this.getStoreGoods(store);
          });

          this.storeList =
            this.page === 1 ? list : [...this.storeList, ...list];
          console.log(this.storeList, "................");
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        this.isLoad = true;
      });
    },
    // 获取商家商品列表
    getStoreGoods(store) {
      var path = "/xyb/supermarket/index/all_goods";
      var data = {
        business_id: store.id,
      };
      ikz.request(path, data, (res) => {
        if (res.data.code) {
          // 将商品数据添加到商家对象中
          this.$set(store, "goodsList", res.data.data.data);
        }
      });
    },

    // 分页
    onBottom(navIndex) {
      if (this.hasMore) {
        this.showLoading = true;
        this.page++;
        this.getStoreList();
      }
    },
    // 跳转商家详情
    toStore(id) {
      if (!uni.getStorageSync("local_user_session")) {
        uni.redirectTo({
          url: "/pages/login/index",
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/Component/supermarket/Program/store/index?id=" + id,
      });
    },
  },
};
</script>

<style lang="scss">
.store-list {
  padding: 20rpx;
  background-color: #f5f5f5;

  .goods-scroll {
    margin-top: 20rpx;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .goods-list {
    white-space: nowrap;
    width: 100%;

    .goods-item {
      display: inline-block;
      width: 180rpx;
      margin-right: 20rpx;

      .goods-image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 8rpx;
      }

      .goods-name {
        font-size: 24rpx;
        margin-top: 8rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .goods-price {
        font-size: 26rpx;
        color: #ff5f15;
        font-weight: bold;
        margin-top: 4rpx;
      }
    }
  }
  .item-box {
    display: flex;
    margin-bottom: 20rpx;
    padding: 30rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    position: relative;

    .left {
      margin-right: 24rpx;

      image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
      }
    }

    .right {
      flex: 1;
      position: relative;

      .title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12rpx;

        .tit {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          max-width: 70%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
        }

        .reserve-tag {
          font-size: 24rpx;
          color: #ff5f15;
          padding: 4rpx 12rpx;
          background: #fff0e6;
          border-radius: 6rpx;
        }
      }

      .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;

        .score {
          display: flex;
          align-items: center;

          .score-text {
            font-size: 24rpx;
            color: #ff5f15;
            font-weight: bold;
          }

          .score-divider {
            margin: 0 10rpx;
            color: #ddd;
          }

          .sale-count {
            font-size: 24rpx;
            color: #666;
          }
        }

        .distance {
          font-size: 24rpx;
          color: #999;
        }
      }

      .row {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 16rpx;
      }

      .tag-box {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 16rpx;

        .tag-column {
          font-size: 20rpx;
          color: #ff5f15;
          padding: 4rpx 12rpx;
          background: #fff0e6;
          border-radius: 6rpx;
          margin-right: 10rpx;
          margin-bottom: 8rpx;
        }
      }

      .discount-tag {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 22rpx;
        color: #ff5f15;
        padding: 4rpx 12rpx;
        border: 1rpx solid #ff5f15;
        border-radius: 6rpx;
      }
    }
  }

  .loading {
    display: flex;
    justify-content: center;
    padding: 30rpx;

    .downwarp-progress {
      display: inline-block;
      width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
      border: 2rpx solid gray;
      border-bottom-color: transparent;
      vertical-align: middle;
    }

    .mescroll-rotate {
      animation: mescrollDownRotate 0.6s linear infinite;
    }

    .downwarp-tip {
      display: inline-block;
      font-size: 28rpx;
      vertical-align: middle;
      margin-left: 16rpx;
      color: gray;
    }
  }

  @keyframes mescrollDownRotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .foot {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 36rpx;

    text {
      font-size: 26rpx;
      position: relative;
      z-index: 2;
      height: 36rpx;
      line-height: 36rpx;
      color: #cccccc;
      padding: 0 22rpx;
    }
  }
}

.empty-container {
  .empty-pic {
    width: 150rpx;
    height: 150rpx;
    margin: 0 auto 56rpx;
    display: block;
  }

  .empty-title {
    text-align: center;
    font-size: 24rpx;
    color: #c7c7c7;
  }
}
</style>